<template>
  <div>
    <div class="content">
      <div class="head">
        <h3>{{ hospitalMsg.hospital?.hosname }}</h3>
        <el-icon color="red" style="margin: 0 3px 0 6px;">
          <WindPower />
        </el-icon>
        <p style="color: #666;">{{ hospitalMsg.hospital?.param.hostypeString }}</p>
      </div>
      <div class="rule">
        <img :src="`data:image/jpeg;base64,` + hospitalMsg.hospital?.logoData" alt="医院标志">
        <div class="rule_text">
          <p style="font-weight: bolder;">挂号规则</p>
          <p>预约周期: XXX 天 放号时间: XXX 停挂时间: XXX </p>
          <p>具体地址:{{ hospitalMsg.hospital?.param.fullAddress }}</p>
          <p>具体路线:{{ hospitalMsg.hospital?.route }}</p>
          <p style="font-weight: bolder;">预约挂号规则</p>
          <p>问就是数据有问题! 问就是数据有问题! 问就是数据有问题! 问就是数据有问题!</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import useDetailStore from '../../store/modules/hospitalDetail'
let hospitalStore = useDetailStore();
let hospitalMsg = hospitalStore.hospitalInfo
</script>

<style scoped lang="scss">
.content {
  .head {
    display: flex;
    align-items: center;
    margin-bottom: 30px;

    h3 {
      font-size: 20px;
      font-weight: bolder;
    }
  }

  .rule {
    display: flex;
    font-family: Arial, Helvetica, sans-serif;
    color: #666;

    .rule_text {
      p {
        margin: 0 0 10px 20px;
      }
    }
  }

}
</style>